<template>
  <div class="common-body-wrapper">
    <search-header single-width="130" :searchList="searchList" @changeHeight="toRetTable" @confirmSearch="toSearch" :isNeedTree="true" :isCheckbox="true" :paramName="paramName" @setSelectedNode="setSelectedNode"></search-header>
    <multi-fun-table :sortColumn='notFormatColumn' :orderType='sortType' :fixed-cols="fixedCols" :is-reset-table="isResetTable" :theads-info="theadsInfo" :tbodys-info="tbodysInfo" @handleMultiCheck="handleMultiCheck" @handleSortColumn="handleSortColumn" @searchFn="getList" @getNextPage="getNextPage">
      <!--按钮-->
      <div class="operate-btn-group" slot="operateBtnGroup">
        <a class="ake_btn ake_btn_text" v-if="isPermmited('REPORT:TRADER:EXPORT')" @click.prevent="exportData()">导出</a>
        <a class="ake_btn ake_btn_text" v-if="isPermmited('REPORT:TRADER:RECREATE_REPORT')" @click.prevent="reCreate()">重新生成</a>
      </div>

      <!--普通列-->
      <template slot="tdCell" slot-scope="props">

        <el-table-column v-if="props.isMultiHeader" :label="props.label" align="center">
          <template v-for="(item, index) in props.children">
            <el-table-column v-if="item.checked" :key="index" :label="item.text" min-width="30" :prop="item.prop" :sortable="item.sortable">
              <template slot-scope="scope">
                {{ scope.row[item.prop] |formatMoney }}
              </template>
            </el-table-column>
          </template>
        </el-table-column>

        <el-table-column v-else :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
          <template slot-scope="scope">
            <span v-if="'reno' == props.prop">{{ scope.$index + 1 }}</span>
            <span v-else-if="'couponReceivable' == props.prop">{{scope.row[props.prop]|formatMoney}}</span>
            <span v-else-if="'createTime' == props.prop">{{scope.row[props.prop]|mileSecondToDate}}</span>
            <span v-else-if="'modifyTime' == props.prop">{{scope.row[props.prop]|mileSecondToDate}}</span>
            <span v-else>{{ scope.row[props.prop] }}</span>
          </template>
        </el-table-column>
      </template>

      <!--操作列内的按钮-->
      <template slot="operateCell" slot-scope="props">
        <el-table-column :fixed="props.fixed" :label="props.label" width="120" class="operateCell">
          <template slot-scope="scope">
            <el-button title="详情" size="small" type="primary" class="ake-icon-font ake_btn ake_font_btn ake_btn_text" icon="icon-info" v-if="isPermmited('REPORT:TRADER:LIST')" @click="toOpenTraderReportDetail(scope.row,'traderReportDetailModal')" plain></el-button>
            <!-- <el-button title="审核" size="small" type="primary" icon="icon-audit" class="ake-icon-font ake_btn_text" v-if="isPermmited('REPORT:TRADER:AUDIT')" @click="auditTraderReport(scope.row)" plain></el-button> -->
            <el-button title="确认现金收款" icon="icon-renew" size="small" type="primary" class="ake_btn_text ake-icon-font" v-if="isPermmited('REPORT:TRADER:SETTLE')" @click="confirmCashSettle(scope.row)" :disabled="scope.row.auditStatus==0 || scope.row.settleStatus!=0" plain></el-button>
          </template>
        </el-table-column>
      </template>
    </multi-fun-table>

    <!---->
    <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>

    <!-- 商家日报表详情 modal      -->
    <basic-modal ref="traderReportDetailModal" width="1000" customeClass="trader-report-detail-modal" static="true">
      <h3 slot="title">商家日报表详情</h3>
      <div class="modal-body" slot="modal-body">

        <search-header tableBoxId="tarderReportModal" single-width="120" isSetSearch="false" :searchList="traderReportDetailRow.searchList" @confirmSearch="toSearchTraderReportDetail"></search-header>

        <multi-fun-table tableBoxId="tarderReportModal" sortColumn='' orderType='' isNeedPrint="false" isSetTable="false" hasCheckboxCol="false" :theads-info="traderReportDetailRow.theadsInfo" :tbodys-info="traderReportDetailRow.tbodysInfo">

          <!--普通列-->
          <template slot="tdCell" slot-scope="props">
            <el-table-column :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{ scope.$index + 1 }}</span>
                <span v-else-if="'billStatus' == props.prop">{{scope.row[props.prop]|formatBillStatus}}</span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>

        </multi-fun-table>

        <!-- 弹窗modal暂时不支持分页  -->
        <table-pagination :size="traderReportDetailRow.total" :cur-page="traderReportDetailRow.pageNumber" @backData="getReportDetailPagination"></table-pagination>

      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('traderReportDetailModal')">关闭</button>
      </div>
    </basic-modal>

  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";

// 引进vue的js
import Trader from "./js/Trader.js";

export default {
  name: 'reportTrader',
  mixins: [common, stardardList, invokeModal, Trader],
  data() {
    return {
      paramName: 'parkIds',
      total: 0,
      fixedCols: 0,
      searchList: [
        {
          index: 1,
          isShow: false,
          type: "datePicker",
          name: "rangeDate",
          pickerType: "daterange",
          propName: "startDate,endDate",
          text: "时间区间",
          value: "",
          style: { width: "360px" }
        },
        {
          index: 2,
          isShow: false,
          type: "text",
          name: "traderName",
          text: "商家名称",
          value: ""
        }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: "reno", text: "序号", width: 68 },
        {
          index: 1,
          isShow: false,
          prop: "reportDate",
          text: "日期",
        },
        {
          index: 2,
          isShow: false,
          prop: "traderName",
          text: "商家名称",
        },
        {
          index: 3,
          isShow: false,
          prop: "traderCode",
          text: "商家代码",
        },
        {
          index: 4,
          isShow: false,
          prop: "couponReceivable",
          text: "应收款",
        },
        {
          index: 5,
          isShow: false,
          text: "实收",
          minWidth: 330,
          isMultiHeader: true,
          children: [
            {
              index: 0,
              isShow: false,
              prop: "couponPaid",
              text: "总",
            },
            {
              index: 1,
              isShow: false,
              prop: "myPaid",
              text: "现金",
            },
            {
              index: 2,
              isShow: false,
              prop: "akePaid",
              text: "线上结算",
            }
          ]
        },
        // {
        //   index: 6,
        //   isShow: false,
        //   text: "待收",
        //   minWidth: 330,
        //   isMultiHeader: true,
        //   children: [
        //     {
        //       index: 8,
        //       isShow: false,
        //       prop: "couponUnpaid",
        //       text: "总",
        //     },
        //     {
        //       index: 9,
        //       isShow: false,
        //       prop: "akeUnpaid",
        //       text: "线上未结算",
        //     },
        //     {
        //       index: 10,
        //       isShow: false,
        //       prop: "billUnpaid",
        //       text: "未付账单",
        //     }
        //   ]
        // },
        // {
        //   index: 11,
        //   isShow: false,
        //   prop: "settleStatusName",
        //   text: "结算状态",
        // }
      ],
      tbodysInfo: []
    };
  },
  filters: {
    formatBillStatus: function(billStatus) {
      return billStatus == 2 ? "已支付" : "未支付";
    }
  }
};
</script>

<style lang="less">
.group-row-modal {
  .first-item {
    width: 240px;
  }
}

.role-select {
  width: 240px;
}

.trader-report-detail-modal {
  .modal-body {
    .table-wrapper {
      min-height: 270px;
      padding: 0;

      .el-table__body-wrapper {
        min-height: 270px;
      }
    }
    .search-box .form-group {
      width: auto;
    }
  }
}
</style>
